import Vue from 'vue'
import {VExpansionPanels,VExpansionPanel,VExpansionPanelHeader,VExpansionPanelContent} from 'vuetify/lib'
import {getNews,getNewsAns} from "@/api/news";

interface IData {
    newsArr: Array<any>
}
export default Vue.extend({
    name: 'News',
    data: (): IData => ({
        newsArr: []
    }),
    components: {
        'v-expansion-panels': VExpansionPanels,
        'v-expansion-panel': VExpansionPanel,
        'v-expansion-panel-header': VExpansionPanelHeader,
        'v-expansion-panel-content': VExpansionPanelContent
    },
    mounted(){
        getNews()
            .then(res => {
                const {code,msg,data} = res as unknown as getNewsAns
                if(code === 200){
                    this.newsArr = data
                }else{
                    console.log(msg)
                }
            })
    },
    render(){
        return (
            <div>
                <div style={{fontSize: '6vw',fontWeight: 'bold',margin: '2vh 0'}}>车展简闻</div>
                <v-expansion-panels accordion={true} style={{backgroundColor: 'red'}} focusable={true}>
                    {
                        this.newsArr?.map(item => {
                            return (
                                <v-expansion-panel key={item.newsId}>
                                    <v-expansion-panel-header><div>
                                        <div style={{fontSize: '5vw',fontWeight: 'bold'}}>{item.newTitle}</div>
                                        <div style={{fontSize: '3.5vw',color: '#999',marginTop: '1vh',lineHeight: '4vh',textAlign: 'left'}}>{item.newDesc}</div>
                                        <div style={{fontSize: '3.5vw',color: '#36D',marginTop: '1vh',textAlign: 'right'}}>{item.newTime}</div>
                                    </div></v-expansion-panel-header>
                                    <v-expansion-panel-content>
                                        <div style={{lineHeight: '4vh',textIndent: '2rem',fontSize: '4.5vw'}}>
                                            {item.newContent}
                                        </div>
                                    </v-expansion-panel-content>
                                </v-expansion-panel>
                            )
                        })
                    }
            </v-expansion-panels>
            </div>
        )
    }
})